<template>
	<div class="message">
		<curr-app :left="245"></curr-app>
		<list-title :data="header"></list-title>
		<div class="search">
			<el-form :inline="true" :model="searchForm" class="demo-form-inline">
				<el-form-item label="是否回复">
					<el-select v-model="searchForm.reply" placeholder="是否回复">
						<el-option label="所有" value=""></el-option>
						<el-option label="未回复" value="1"></el-option>
						<el-option label="已回复" value="2"></el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="留言时间">
					<el-date-picker
					v-model="searchForm.addTime"
					type="daterange"
					format="yyyy-MM-dd"
					value-format="yyyy-MM-dd"
					range-separator="至"
					start-placeholder="开始日期"
					end-placeholder="结束日期">
					</el-date-picker>
				</el-form-item>
				<el-form-item>
					<el-button type="primary" size="mini" @click="searchSubmit">查询</el-button>
				</el-form-item>
			</el-form>
		</div>
		<list-table :list="messageList" :tableLoading="tableLoading" :footer="true" :pagination="pagination" :appid="$route.query.appid">
			<template v-slot:data>
				<el-table-column prop="title" label="标题"></el-table-column>
				<el-table-column label="联系方式" width="150px">
					<template slot-scope="scope">
						{{scope.row.name}}<br>{{scope.row.phone}}
					</template>
				</el-table-column>
				<el-table-column prop="contents" label="内容"></el-table-column>
				<el-table-column prop="companyname" label="企业名称"></el-table-column>
				<el-table-column prop="add_time" label="留言时间" width="150px"></el-table-column>
				<el-table-column label="回复" width="150px">
					<template slot-scope="scope">
						{{scope.row.replyname}}<br>{{scope.row.reply_time}}
					</template>
				</el-table-column>
				<el-table-column label="操作" width="100">
					<template slot-scope="scope">
						<el-popover
						placement="top"
						width="160"
						v-model="scope.row.delTipStatus"  v-if="auth.delete">
							<p class="del-tip"><span class="el-icon-question"></span>确定删除吗？</p>
							<div style="text-align: right; margin: 0">
								<el-button size="mini" type="text" @click="scope.row.delTipStatus = false">取消</el-button>
								<el-button type="primary" size="mini" @click="handleDelete(scope.$index, scope.row)">确定</el-button>
							</div>
							<el-button type="text" slot="reference" :disabled='scope.row.delBtnStatus'>
								删除 <span class="el-icon-loading" v-if='scope.row.delBtnStatus'></span>
							</el-button>
						</el-popover>
					</template>
				</el-table-column>
			</template>
		</list-table>
	</div>
</template>

<script>
import ListTitle from "pc/common/Title"
import ListTable from "pc/common/ListTable"
import {changeToBool, judgeAuth, filterEmpty} from "static/js/common.js"
import {ERROR} from "static/js/constant.js"
import CurrApp from "pc/common/CurrApp"

export default {
	data() {
		return {
			/*appid*/
			appid: this.$route.query.appid,
			/*头部数据*/
			header: {
				title: '留言列表',
				reload: true
			},
			auth: {
				delete: true,//删除
			},
			/*搜索*/
			searchForm: {
				appid: this.$route.query.appid,
				reply: this.$route.query.reply,
				addTime: (this.$route.query.begin_time!=undefined)?[this.$route.query.begin_time, this.$route.query.end_time]:'',
			},
			/*列表数据*/
			messageList: [
				// {
				// 	id: 1,
				// 	title: '',
				// 	name: '',
				// 	companyname: '',
				// 	phone: '',
				// 	contents: '',
				// 	add_time: '',
				// 	reply: '',
				// 	replyname: '',
				// 	reply_time: '',
				// 	delBtnStatus: false,//删除按钮状态
				// 	delTipStatus: false,//删除提示状态
				// }
			],
			pagination: {
				count: 0,
				currPage: 1,
				pageSize: 3
			},
			tableLoading: true
		};
	},
	components: {
		ListTitle,
		ListTable,
		CurrApp
	},
	created: function() {
		/*获取列表数据*/
		this.getMessageList()
	},
	methods: {
		/*取出列表数据*/
		getMessageList: function(){
			if(this.$api.messageList != undefined){
				this.$baseURL(this.$domain.cms)
				this.$route.query.lang = this.currlang
				this.$get(this.$api.messageList, this.$route.query).then(res => {
					if(res.data.code === 0){
						if(res.data.data != undefined){
							this.messageList = []
							Object.keys(res.data.data.list).forEach((k) => {
								this.messageList.push ({
									id: res.data.data.list[k].mid,
									title: res.data.data.list[k].title,
									name: res.data.data.list[k].name,
									companyname: res.data.data.list[k].companyname,
									phone: res.data.data.list[k].phone,
									contents: res.data.data.list[k].contents,
									add_time: res.data.data.list[k].add_time,
									reply: changeToBool(res.data.data.list[k].reply),
									replyname: res.data.data.list[k].replyname,
									reply_time: (res.data.data.list[k].reply_time != '0000-00-00 00:00:00')?res.data.data.list[k].reply_time:'',
									delBtnStatus: false,//删除按钮状态
									delTipStatus: false,//删除提示状态
								});
							})
							this.pagination = res.data.data.pageInfo
						}
					}
				})
				.catch(err => {
					let error = ERROR.SER404
					if(err.response != undefined  && err.response.status == 500){
						error = ERROR.SER500
					}
					this.$message({
						showClose: true,
						message: error,
						type: 'error'
					});
				})
				.finally(() => {
					this.tableLoading = false
				}) 
			}
		},
		/*删除*/
		handleDelete(index, row) {
			if(this.$api.deleteMessage != undefined){
				if(!this.messageList[index].delBtnStatus){
					this.messageList[index].delBtnStatus = true//锁住当前的 删除按钮
					this.messageList[index].delTipStatus = false//提示消失
					/*请求后台删除*/
					this.$baseURL(this.$domain.cms)
					this.$get(this.$api.deleteMessage, {
						appid: this.appid,
						'id': row.id
					}).then(res => {
						if(res.data.code == 0){
							this.$message({
								showClose: true,
								message: res.data.info,
								type: 'success'
							});
							this.messageList.splice(index, 1);//删除当前行
						}else{
							this.$message({
								showClose: true,
								message: res.data.info,
								type: 'error'
							});
						}
					})
					.catch(err => {
						let error = ERROR.SER404
						if(err.response != undefined  && err.response.status == 500){
							error = ERROR.SER500
						}
						this.$message({
							showClose: true,
							message: error,
							type: 'error'
						});
					})
					.finally(() => {
						this.messageList[index].delBtnStatus = false//释放当前的 删除按钮
					}) 
				}
			}
		},
		/*搜索提交*/
		searchSubmit: function(){
			let query = filterEmpty(JSON.parse(JSON.stringify(this.searchForm)))
			if(query.addTime != undefined){
				query = Object.assign({begin_time: query['addTime'][0], end_time: query['addTime'][1]}, query)
				delete query['addTime']
			}
			this.$router.push({query})
		},
	},
	watch: {
		/*监听路由变化，根据参数查询数据*/
		'$route' (to){
			this.tableLoading = true
			this.getMessageList()
		}
	},
    computed: {
    	
    }
};
</script>

<style lang="stylus" scoped>
.message
	.search
		margin-top: 10px
		.el-form-item--small.el-form-item
			margin-bottom: 0px
</style>